<template>
  <div class="securityCentre">
    <Card>
      <p slot="title">安全中心</p>
      <div class="card-head"><span class="badge bg-gray">商户秘钥</span></div>
      <Row class="card-body">
        <i-col :xs="12"><div>已设置</div></i-col>
        <i-col :xs="6"><Button class="com-btm" @click="check = true">查看</Button></i-col>
      </Row>
      <div class="card-head"><span class="badge bg-gray">谷歌验证</span></div>
      <Row class="card-body">
        <i-col :xs="12">
          <p>未绑定: 您未绑定谷歌验证</p>
          <p class="orangered">提示:为了您的资金安全,请尽快绑定谷歌验证码!</p>
          <p>手机客户端下载地址: Android / IOS</p>
        </i-col>
        <i-col :xs="6">
          <Button class="com-btm" @click="binding" :disabled="bindTxt=='已绑定'?true:false">{{ bindTxt }}</Button>
        </i-col>
      </Row>
      <div class="card-head"><span class="badge bg-gray">登录设置</span></div>
      <Row class="card-body">
        <i-col :xs="12">
          <p>已设置: 仅登录密码验证</p>
          <p class="orangered">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责!</p>
        </i-col>
        <i-col :xs="6"><Button class="com-btm" @click="changeLogin = true">更换</Button></i-col>
      </Row>
      <div class="card-head"><span class="badge bg-gray">支付设置</span></div>
      <Row class="card-body">
        <i-col :xs="12">
          <p>已设置: 仅支付密码验证</p>
          <p class="orangered">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责!</p>
        </i-col>
        <i-col :xs="6"><Button class="com-btm" @click="changePay = true">更换</Button></i-col>
      </Row>
    </Card>
    <!-- 查看 -->
    <Modal v-model="check" title="商户密钥">
      <i-form ref="form-Key" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Form-item label="商户密钥" prop="textareaText">
          <i-input v-model="formValidate.textareaText" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入密钥"></i-input>
        </Form-item>
        <Form-item label="谷歌验证码" prop="ggcode"><i-input v-model="formValidate.ggcode" max-lengtg></i-input></Form-item>
        <Form-item>
          <i-button class="com-btm" @click="creatKey">随机生成密钥</i-button>
          <i-button class="com-btm" @click="changeKey" style="margin-left: 8px">修改密钥</i-button>
        </Form-item>
      </i-form>
      <div slot="footer"></div>
    </Modal>
    <!-- 绑定谷歌 -->
    <Modal v-model="bind" title="绑定谷歌验证">
      <div class="qrcode-img" id="qrCode" ref="qrCodeDiv"></div>
      <div class="text-center mb-10"><span>请使用Google身份验证器扫描上方二维码</span></div>
      <i-form ref="form-Gg" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Form-item label="谷歌验证码" prop="ggcode"><i-input v-model="formValidate.ggcode"></i-input></Form-item>
        <Form-item><i-button class="com-btm" @click="bingGg" >绑定</i-button></Form-item>
      </i-form>
      <div slot="footer"></div>
    </Modal>
    <!--  更换登录密码-->
    <Modal v-model="changeLogin" title="登录设置">
      <i-form ref="form-login" :rules="ruleValidate" :model="formValidate" :label-width="120">
        <Form-item prop="login_safemode" label="验证方式">
          <RadioGroup vertical v-model="formValidate.login_safemode">
            <Radio label="0"><span>仅登录密码验证</span></Radio>
            <Radio label="1"><span>登录密码+谷歌组合验证(需绑定谷歌验证)</span></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="谷歌验证码" prop="ggcode"><i-input v-model="formValidate.ggcode"></i-input></Form-item>
        <Form-item><i-button class="com-btm" @click="passwCheck">确定</i-button></Form-item>
      </i-form>
      <div slot="footer"></div>
    </Modal>
    <Modal v-model="changePay" title="支付设置">
      <i-form ref="form-pay" :rules="ruleValidate" :model="formValidate" :label-width="120">
        <Form-item prop="pay_safemode" label="验证方式">
          <RadioGroup vertical v-model="formValidate.pay_safemode">
            <Radio label="3"><span>无需验证</span></Radio>
            <Radio label="0"><span>仅支付密码验证</span></Radio>
            <Radio label="1"><span>仅谷歌验证(需绑定谷歌验证)</span></Radio>
            <Radio label="2"><span>支付密码+谷歌组合验证(需绑定谷歌验证)</span></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="谷歌验证码" prop="ggcode"><i-input v-model="formValidate.ggcode"></i-input></Form-item>
        <Form-item><i-button class="com-btm" @click="codeSubmit">确定</i-button></Form-item>
      </i-form>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { randomWord } from '@/libs/tools'
import { getQR, bindGoogle, changesSecretKey, changesLoginMode, changesPayMode } from '@/api/user'
const noNull = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('必须项不能为空'))
  }
  // 模拟异步验证效果
  setTimeout(() => {
    callback()
  })
}
export default {
  data () {
    return {
      bindTxt: '绑定',
      check: false,
      bind: false,
      changeLogin: false,
      changePay: false,
      formValidate: {
        textareaText: '',
        ggcode: '',
        login_safemode: this.$store.state.user.userInfo.login_safemode.toString(),
        pay_safemode: this.$store.state.user.userInfo.pay_safemode.toString()
      },
      ruleValidate: {
        textareaText: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],

        ggcode: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],
        codeCheck3: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],
        codeCheck4: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],
        login_safemode: [
          {
            validator: noNull,
            trigger: 'change'
          }
        ],
        pay_safemode: [
          {
            validator: noNull,
            trigger: 'change'
          }
        ],
        secret: ''
      }
    }
  },
  mounted () {
    this.bindTxt = this.$store.state.user.userInfo.google_secret_key == null ? '绑定' : '已绑定'
    this.formValidate.textareaText = this.$store.state.user.userInfo.secret_key
  },
  methods: {
    binding () {
      getQR(this.$store.state.user.userInfo.uid)
        .then(res => {
          this.secret = res.data.secret
          setTimeout(() => {
            this.qrcodeCreated(res.data.qrcodeUrl)
          }, 100)
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 二维码生成
    qrcodeCreated (qrurl) {
      document.getElementById('qrCode').innerHTML = ''
      new QRCode(this.$refs.qrCodeDiv, {
        text: qrurl,
        width: 200,
        height: 200,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      })
      this.bind = !this.bind
    },
    // 生成秘钥
    creatKey () {
      this.formValidate.textareaText = randomWord(false, 32)
    },
    // 修改秘钥
    changeKey () {
      this.$refs['form-Key'].validate(valid => {
        if (valid) {
          this.$Modal.confirm({
            title: '确认信息',
            content: '若已经使用api接口下单，修改商户密钥后请更新api接口的商户密钥！',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              let data = {
                uid: this.$store.state.user.userInfo.uid,
                secret_key: this.formValidate.textareaText,
                verifyCode: this.formValidate.ggcode
              }
              changesSecretKey(data)
                .then(res => {
                  this.$Message.success(res.msg)
                  this.formValidate.ggcode = ''
                  this.$store.dispatch('getUserInfo')
                  this.check = !this.check
                })
                .catch(err => {
                  this.$Message.error(err.msg)
                })
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 绑定谷歌验证码
    bingGg () {
      this.$refs['form-Gg'].validate(valid => {
        if (valid) {
          let data = {
            uid: this.$store.state.user.userInfo.uid,
            verifyCode: this.formValidate.ggcode,
            secret: this.secret
          }
          bindGoogle(data)
            .then(res => {
              this.$Message.success('绑定成功!')
              this.bindTxt = '已绑定'
              this.secret = ''
              this.formValidate.ggcode = ''
              this.$store.dispatch('getUserInfo')
              this.bind = !this.this.bind
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 登录密码验证
    passwCheck () {
      this.$refs['form-login'].validate(valid => {
        if (valid) {
          let data = {
            uid: this.$store.state.user.userInfo.uid,
            login_safemode: this.formValidate.login_safemode,
            verifyCode: this.formValidate.ggcode
          }
          changesLoginMode(data)
            .then(res => {
              this.$Message.success(res.msg)
              this.formValidate.ggcode = ''
              this.$store.dispatch('getUserInfo')
              this.changeLogin = !this.changeLogin
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 验证码验证
    codeSubmit () {
      this.$refs['form-pay'].validate(valid => {
        if (valid) {
          let data = {
            uid: this.$store.state.user.userInfo.uid,
            pay_safemode: this.formValidate.pay_safemode,
            verifyCode: this.formValidate.ggcode
          }
          changesPayMode(data)
            .then(res => {
              this.$Message.success(res.msg)
              this.formValidate.ggcode = ''
              this.$store.dispatch('getUserInfo')
              this.changePay = !this.changePay
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>

<style lang="less">
.securityCentre .card-head {
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
}

.securityCentre .card-body {
  padding: 10px 15px;
  line-height: 24px;
  border-bottom: 1px solid #f6f6f6;
}

.securityCentre .badge {
  font-size: 12px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
}

.securityCentre .bg-gray {
  background-color: #eee !important;
  color: #666 !important;
}

.securityCentre .orangered {
  color: orangered;
}

.qrcode-img {
  width: 200px;
  height: 200px;
  margin: 0 auto;

  img {
    width: 100%;
  }
}
</style>
